<template>
  <div class="user-info-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#000000">个人资料</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="user-info-container" :style="{'padding-top':titleH + statusH + 15 + 'px'}">
      <div class="info-holder flex-col">
        <div class="name">{{info.name}}</div>
        <div class="info-box flex-col">
          <div class="info-item flex-row-v-center">
            <div class="left flex-row-v-center">
              <div class="cube"></div>
              <div class="key">性别：</div>
              <div>{{info.processGender}}</div>
            </div>
            <div class="right flex-row-v-center">
              <div class="cube"></div>
              <div class="key">年龄：</div>
              <div>{{info.processAge}}</div>
            </div>
          </div>
          <div class="info-item flex-row-v-center">
            <div class="left flex-row-v-center">
              <div class="cube"></div>
              <div class="key">体重：</div>
              <div>{{info.body_weight}}</div>
            </div>
            <div class="right flex-row-v-center">
              <div class="cube"></div>
              <div class="key">身高：</div>
              <div>{{info.body_height}}</div>
            </div>
          </div>
          <div class="info-item flex-row-v-center">
            <div class="left flex-row-v-center">
              <div class="cube"></div>
              <div class="key">联系方式：</div>
              <div>{{info.contact}}</div>
            </div>
            <div class="right flex-row-v-center">
              <div class="cube"></div>
              <div class="key">过敏史：</div>
              <div>{{info.anaphylaxis > 0 ? '有' : '无'}}</div>
            </div>
          </div>
          <div class="info-item flex-row-v-center">
            <div class="flex-row-v-center">
              <div class="cube"></div>
              <div class="key">所在地：</div>
              <div>{{info.address}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="bq-detail flex-col">
        <div class="title flex-row-v-center">
          <div class="cube"></div>
          <div class="key">病情描述：</div>
        </div>
        <div class="content">
          {{info.description}}
        </div>
        <div class="btn-box flex-center">
          <!--<div class="btn flex-center" @click="goToEdit">编辑</div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import navbar from '@/components/navbar'
  import Core from 'core'
  import global from 'global'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,

        id: 0,
        info: {},
        sexArray: ['未知', '男', '女']
      }
    },

    onShow () {
      let id = this.$root.$mp.query['id']
      this.id = id
      this._getHospitalCardDetail(id, (res) => {
        console.log(res)
        this.info = res
        this.info.processGender = this.sexArray[res.gender]
        this.info.processAge = res.birthday ? Core.Util.getDiffDate(res.birthday, Core.Util.getTodayBegin()) : 23
      })
    },

    methods: {
      onClickGoBack () {
        Core.Util.goBack()
      },
      goToEdit () {
        Common.go('/pages/我的病历/创建/main?id=' + this.id + '&from=dzbl')
      },
      _getHospitalCardDetail (id, callback) {
        Core.Api.HospitalCard.getHospitalCardDetail(id)
          .then(res => {
            callback(res.hospital_card)
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user-info-page {
    width: 100%;
    height: 100%;
    position: relative;

    .nav-bar {
      background: #FFFFFF;
    }

    .user-info-container {
      width: 100%;
      padding: 15px 12px;
      box-sizing: border-box;
      .info-holder {
        background:rgba(255,255,255,1);
        box-shadow:0 1px 7px 0 rgba(8,1,3,0.04);
        border-radius:10px;
        padding: 20px;
        .name {
          text-align: center;
          font-size:19px;
          font-weight:bold;
          color:rgba(14,196,169,1);
        }

        .info-item {
          font-size:14px;
          font-weight:400;
          color:#313131;
          padding: 6px 0;
          .key {
            color: #939393;
          }
          .cube {
            width:8px;
            height:8px;
            background:rgba(255,159,65,1);
            box-shadow:0px 1px 6px 0px rgba(255,180,107,0.49);
            margin-right: 14px;
          }
          .left {
            width: 70%;
          }
          .right {
            width: 30%;
          }
        }
      }
      .bq-detail {
        margin-top: 15px;
        background:rgba(255,255,255,1);
        box-shadow:0 1px 7px 0 rgba(8,1,3,0.04);
        border-radius:10px;
        padding: 20px;
        .title {
          font-size:14px;
          font-weight:400;
          color:#313131;
          padding: 6px 0;
          .key {
            color: #939393;
          }
          .cube {
            width:8px;
            height:8px;
            background:rgba(255,159,65,1);
            box-shadow:0px 1px 6px 0px rgba(255,180,107,0.49);
            margin-right: 14px;
          }
        }
        .content {
          padding-left: 22px;
          font-size:12px;
          color:rgba(49,49,49,1);
          line-height:20px;
        }
        .btn-box {
          padding: 55px 0 35px 0;
          .btn {
            width:115px;
            height:36px;
            background:rgba(14,197,169,1);
            border-radius:17px;
            font-size:16px;
            color:rgba(255,255,255,1);
          }
        }
      }
    }
  }
</style>
